<template>
  <div class="login">
    <div class="left">
      <img
        src="http://47.104.167.34:9110/assets/login-logo-57e339e7.png"
        alt=""
      />
    </div>
    <div class="right">
      <div class="admin">
        <h1>欢迎回来</h1>
        <p>—————— 账号密码登录 ——————</p>

        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="user">
            <el-input
              type="text"
              v-model="ruleForm.user"
              autocomplete="off"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="Pass">
            <el-input
              type="password"
              v-model="ruleForm.Pass"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              round
              @click="submitForm()"
              style="width: 200px"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { Login } from "../../../units/api";
export default {
  data() {
    var checkuser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };

    return {
      ruleForm: {
        user: "",
        Pass: "",
      },
      rules: {
        user: [{ validator: checkuser, trigger: "blur" }],
        Pass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          console.log("成功一半")
          try {
              let res = await Login({ username: this.ruleForm.user, password: this.ruleForm.Pass });
              console.log(res);
              if(res.status == 200){
                  localStorage.setItem("token", res.data.data.token);
                  this.$message.success('登入成功')
                 this.$store.state.langing = true
                 this.$store.state.zzz = 1
                  this.$router.push('/htindex')
                  
              }
            
          } catch (error) {
            console.log("登录接口醋无",error);
            this.$message.error("登陆失败，请重试")
                
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
* {
  //   padding: 0;
  //   margin: 0;
}
.login {
  display: flex;
  width: 100%;
  height: 98vh;
  .left {
    flex: 2;
    background-color: rgb(5, 5, 51);
    position: relative;
    img {
      width: 300px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .right {
    flex: 1;
    background: #fff;
    position: relative;
    .admin {
      //   background-color: rgb(255, 188, 188);
      width: 400px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      padding: 0 40px;
      p {
        color: #666;
      }
    }
  }
}
</style>